<template>
  <m-modal :visible="visible"
           mask
           resizable
           :title="props.title"
           :showFooter="true"
           :cancelText="$t('cancel')"
           :okText="$t('confirm')"
           :width="props.width || 300"
           :height="props.height || 300"
           class="v-text-editor-modal"
           @ok="handleSave"
           @cancel="handleCancel">
    <div style="width:100%;height:100%">
      <el-input v-model="inputvalue"
                :class="{
                  'red-border': invalidValue,
                }"
                :placeholder="props.placeholder"
                type="textarea"
                class="_input"
                @input="handleInputChange" />
    </div>

  </m-modal>
</template>
<script lang="ts">
import { mixPopup } from "@/common/Portal";

export default mixPopup({
  name: "text-editor-modal"
});
</script>
<script lang="ts" setup>
import { ref, watch } from "vue";

import { usePortal } from "@/common/usePortal";
const invalidValue = ref(false);
/**
 * 文本编辑小弹框
 */
const props = defineProps<{
  text: string;
  title: string;
  placeholder: string;
  width: number;
  height: number;
  validText?: (text: string) => boolean;
}>();

const emit = defineEmits<{
  (event: "sure", data: any): void;
  (event: "clsoe", data: any): void;
}>();

let inputvalue = ref<string>(props.text as string);

watch(
  () => props.text,
  (newVal) => {
    inputvalue.value = newVal as string;
  }
);

const { visible, handleOk, handleCancel } = usePortal(emit);

const handleSave = async () => {
  if (props.validText) {
    const res = await props.validText(inputvalue.value);
    if (res) {
      handleOk(inputvalue.value);
    }
  } else {
    handleOk(inputvalue.value);
  }
};
const handleInputChange = (value: string) => {
  if (props.validText) {
    invalidValue.value =  !props.validText(inputvalue.value);
  }
};
</script>
<style lang="scss">
.v-text-editor-modal {
  ._input {
    padding: 15px;
    box-sizing: border-box;
    // border:1px solid;
    width: 100%;
    height: 100%;

    .el-textarea__inner {
      height: 100%;
      //  border: 1px solid red;
    }
  }

  .red-border {

    .el-textarea__inner {
      border-color: rgb(248, 226, 221);
      border: 1px solid red;
    }
  }
}
</style>
